<!--
  主应用组件
  
  这是 Electron 应用的主 Vue 组件
  使用 Vue Router 进行页面导航和路由管理
-->

<template>
  <div class="app-container">
    <!-- 自定义标题栏 -->
    <TitleBar v-if="!isChildWindow" />
    
    <!-- 路由视图容器 -->
    <div class="router-container">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import TitleBar from './components/TitleBar.vue'

const router = useRouter()

// 是否是子窗口模式
const isChildWindow = ref(false)

/**
 * 检查是否是子窗口
 */
const checkIfChildWindow = () => {
  // 检查URL参数来判断是否是子窗口
  const urlParams = new URLSearchParams(window.location.search)
  const windowType = urlParams.get('type')
  const windowId = urlParams.get('id')
  
  console.log('Current URL:', window.location.href)
  console.log('Window type:', windowType)
  console.log('Window ID:', windowId)
  
  if (windowType === 'child-window') {
    isChildWindow.value = true
    console.log('This is a child window with ID:', windowId)
    // 子窗口直接导航到子窗口路由
    router.push('/child-window')
  } else {
    console.log('This is the main window')
  }
}

// 生命周期
onMounted(() => {
  // 检查是否是子窗口
  setTimeout(() => {
    checkIfChildWindow()
  }, 100)
})
</script>

<style scoped>
/* 应用容器样式 */
.app-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: var(--bg-secondary, #f5f5f5);
  overflow: hidden;
}

/* 路由容器 */
.router-container {
  flex: 1;
  overflow: auto;
  height: 100%;
  background: var(--bg-primary, white);
}

/* 路由过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

</style>